<template>
    <div>
        <el-dialog title="修改信息" :visible.sync="dialogUpdateFormVisible">
            <el-form>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="visit.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="visit.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="到访日期" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="visit.visitDate"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
        <el-date-picker
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="visitVo.visitDate"
                type="date"
                placeholder="查询当天记录"
                style="width:150px"
        ></el-date-picker>
        <el-date-picker
                size="mini"
                value-format="yyyy-MM-dd"
                v-model="visitVo.startDate"
                type="date"
                placeholder="开始日期"
                style="width:150px"
        ></el-date-picker>至
        <el-date-picker
                size="mini"
                value-format="yyyy-MM-dd"
                v-model="visitVo.endDate"
                type="date"
                style="width:150px"
                placeholder="结束日期">
        </el-date-picker>
        <el-button
                slot="trigger"
                size="mini"
                type="primary"
                @click="getList()">查询
        </el-button>
        <el-button
                icon="el-icon-refresh-right"
                slot="trigger"
                size="mini"
                type="primary"
                @click="reset()">重置
        </el-button>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageInfo.pageSizes"
                    :page-size="pageInfo.pageSize"
                    :current-page="pageInfo.pageNum"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.totalPage"
            >
            </el-pagination>
        </div>
        <div >
            <el-table :data="visits"
                      size="mini" >
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="姓名" prop="name" width="100"> </el-table-column>
                <el-table-column label="联系方式" prop="phone" width="150"></el-table-column>
               <el-table-column label="到访时间" prop="visitDate" width="180"></el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope">
                      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                       <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                 </template>
                </el-table-column>
             </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    totalPage: 0,
                    pageSizes: [5, 10, 15, 20]
                },
                visits: [],
                visit: {
                    id: 0,
                    name: "",
                    phone: "",
                    visitDate: "",
                },
                visitVo: {
                    id: 0,
                    name: "",
                    phone: "",
                    visitDate: "",
                    startDate:"",
                    endDate:"",
                    pageNum: 0,
                    pageSize: 0
                },
                dialogUpdateFormVisible: false,
                formLabelWidth: '120px',
            }
        },
        methods:{
            reset(){
                this.visitVo.visitDate="";
                this.visitVo.startDate="";
                this.visitVo.endDate="";
                this.visitVo.pageNum=this.pageInfo.pageNum;
                this.visitVo.pageSize=this.pageInfo.pageSize;
                this.getList()
            },
            handleDelete(index,row){
                let visitVo={
                    id:row.id,
                };
                this.$axios.post("/api/xjh/visit/delete",visitVo).then(r=>{
                    if(r.data.code==200){
                        this.getList();
                    }
                })
            },
            update(){
              let visitVo={
                  id:this.visit.id,
                  name:this.visit.name,
                  phone:this.visit.phone,
                  visitDate:this.visit.visitDate
              }
              console.log(visitVo.visitDate);
              this.$axios.post("/api/xjh/visit/update",visitVo).then(r=>{
                  if(r.data.code==200){
                      this.getList();
                      this.dialogUpdateFormVisible=false;
                  }
              })
            },
            handleEdit(index,row){
                this.dialogUpdateFormVisible=true;
                let visitVo={
                    id:row.id
                }
                console.log(visitVo)
                this.$axios.post("/api/xjh/visit/getById",visitVo).then(r=>{
                    if(r.data.code==200){
                        this.visit=r.data.data;
                    }
                })
            },
            handleSizeChange(val) {
                this.visitVo.pageSize=val;
                this.visitVo.pageNum=this.pageInfo.pageNum
                this.getList()
            },
            handleCurrentChange(val) {
                this.visitVo.pageNum=val;
                this.visitVo.pageSize=this.pageInfo.pageSize
                this.getList()
            },
            getList(){
                this.$axios.post("api/xjh/visit/getList",this.visitVo).then((r)=>{
                    if(r.data.code==200){
                        console.log(r.data.data)
                        this.visits=r.data.data.list;
                        this.pageInfo.totalPage=r.data.data.total;
                    }
                })
            },
        },
        created() {
            this.visitVo.pageNum=this.pageInfo.pageNum;
            this.visitVo.pageSize=this.pageInfo.pageSize;
            this.getList()
        }
    }
</script>